
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin: 0;padding:0;}
        
        body{
            width: 100%;height: 360px;
            background:url(img/bg.jpg);
            background-size:cover;
        }
        .box{
            width:200px;height:200px;
            position: relative;
            margin:200px auto;
            transform-style:preserve-3d;
            transform: rotateX(-30deg)  scaleZ(1);
            animation:move 3s linear infinite;
            padding-top:50px;
            margin-left:700px;
        }       
        @keyframes move{
            from{
                transform: rotateX(-30deg) rotateY(0deg)
            }
            to{
                transform: rotateX(-30deg) rotateY(360deg) 
            }
        }
        #inner{
            width: 100px;height: 100px;
            position: relative;
            margin: 50px 50px;
            transform-style:preserve-3d;
            /* transform: rotateX(-30deg)  scaleZ(1); */
        }
        #inner div{
            width: 100px;height: 100px;
            position: absolute;
            font-size:25px;
            text-align: center;
            line-height: 100px;
            transition:transform 1s linear;
            opacity: 1;
        }
        .box-box{
            width: 200px;height: 200px;
            opacity: 0.5;
            position: absolute;
            font-size:45px;
            text-align: center;
            line-height: 200px;
            transition:transform 1s linear;
            border: 10px yellowgreen solid;
            border-radius:7%;
        }
        
        .qian{
            background:rgb(9, 162, 209);
            transform: translateZ(100px);
        }
        .one{
            
            transform: translateZ(50px);
            background:#0f0;
        }
        .hou{
            background:rgb(9, 162, 209);
            transform: translateZ(-100px);
        }
        .two{
            background:#0f0;
            transform: translateZ(-50px);
        }
        .left{
            background:rgb(9, 162, 209);
            transform: rotateY(90deg) translateZ(-100px);
        }
        .three{
            background:#0f0;
            transform: rotateY(90deg) translateZ(-50px);
        }
        .right{
            background:rgb(9, 162, 209);
            transform: rotateY(90deg) translateZ(100px);
        }
        .four{
            background:#0f0;
            transform: rotateY(90deg) translateZ(50px);
        }
        .top{
            background:rgb(9, 162, 209);
            transform: rotateX(90deg) translateZ(100px);
        }
        .five{
            background:#0f0;
            transform: rotateX(90deg) translateZ(50px);
        }
        .bottom{
            background:rgb(9, 162, 209);
            transform: rotateX(90deg) translateZ(-100px);
        }
        .six{
            background:#0f0;
            transform: rotateX(90deg) translateZ(-50px);
        }
        .box:hover .qian{
            transform: translateZ(250px);
        }
        .box:hover .hou{
            transform: translateZ(-250px);
        }
        .box:hover .left{
            transform: rotateY(90deg) translateZ(-250px);
        }
        .box:hover .right{
            transform: rotateY(90deg) translateZ(250px);
        }
        .box:hover .top{
            transform: rotateX(90deg) translateZ(250px);
        }
        .box:hover .bottom{
            transform: rotateX(90deg) translateZ(-250px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="qian box-box"></div>
        <div class="left box-box"></div>
        <div class="right box-box"></div>
        <div class="top box-box"></div>
        <div class="bottom box-box"></div>
        <div class="hou box-box"></div>
        <div id="inner">
            <div class="one asd"><img src="img/01.png" alt=""> </div>
            <div class="two asd"><img src="img/02.png" alt=""> </div>
            <div class="three asd"><img src="img/03.png" alt=""> </div>
            <div class="four asd"><img src="img/04.png" alt=""> </div>
            <div class="five asd"><img src="img/05.png" alt=""> </div>
            <div class="six asd"><img src="img/06.png" alt=""> </div>
        </div>
    </div>
</body>
<!-- <script src="js/jquery-1.11.3.min.js"></script>
<script>
    $(function (){
        $(document).mousemove(function (ev){
            $('.box').css({
                'animation':'move 3s linear infinite',
                'transform':'rotateX('+ev.clientX/5+'deg) rotateY('+ev.clientY/5+'deg)',
            })
        })
    })
</script> -->
</html>

